<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">   

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </h:head>

    <h:body onload="reset();">

        <ui:composition>

            <p:dialog closable="true" showHeader="true" widgetVar="pn_visualizar_rota" resizable="false" width="1000"
                      maximizable="false" modal="true" styleClass="dialog" appendToBody="true" onShow="printRota()">

                <f:facet name="header">
                    Visualização de Rota No Mapa
                </f:facet>

                <h:panelGrid columns="2" style="width: 950px">
                    <p:scrollPanel mode="native" style="width: 250px; height: 500px; border: none">
                        <div id="div_map"/>
                    </p:scrollPanel>
                    <div id="pg02" style="width:725px; height: 500px;"/>
                </h:panelGrid>

                <h:form prependId="false">
                    <p:outputPanel autoUpdate="true">
                        <h:inputHidden id="itLatOri"   value="#{controllerPrincipal.rota.latitudeOrigem}"/>
                        <h:inputHidden id="itLatDest"  value="#{controllerPrincipal.rota.latitudeDestino}"/>
                        <h:inputHidden id="itLongOri"  value="#{controllerPrincipal.rota.longitudeOrigem}"/>
                        <h:inputHidden id="itLongDest" value="#{controllerPrincipal.rota.longitudeDestino}"/>
                    </p:outputPanel>
                </h:form>

                <div class="espacamento"/>

                <script>
                        
                    //<![CDATA[  
                    function printRota() {
                        
                        var latOrigem   = document.getElementById('itLatOri').value;
                        var longOrigem  = document.getElementById('itLongOri').value;
                        var latDestino  = document.getElementById('itLatDest').value;
                        var longDestino = document.getElementById('itLongDest').value;
                        
                        //Limpando o Conteúdo das DIV's
                        $("#pg02").empty();
                        $("#div_map").empty();
                        
                        var directionsService = new google.maps.DirectionsService();
                        var directionsDisplay = new google.maps.DirectionsRenderer();
                        var myLatlng = new google.maps.LatLng(-23.5489433, -46.6388182);
                        var myOptions = {
                            zoom: 17,
                            center: myLatlng,
                            mapTypeControl: true,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        }
                        var map = new google.maps.Map(document.getElementById('pg02'), myOptions);
                        
                        directionsDisplay.setMap(map);
                        directionsDisplay.setPanel(document.getElementById("div_map"));
                            
                        var latLngOrigem = new google.maps.LatLng(latOrigem, longOrigem);
                        var latLngDestino = new google.maps.LatLng(latDestino, longDestino);
                            
                        var request = {
                            origin: latLngDestino,
                            destination: latLngOrigem,
                            optimizeWaypoints: false,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING
                        };

                        directionsService.route(request, function(response, status) {
                            if (status === google.maps.DirectionsStatus.OK) {
                                directionsDisplay.setDirections(response);
                            } else if (status === google.maps.DirectionsStatus.NOT_FOUND) {
                                alert('Endereço Não Encontrado');
                            }
                        });

                        return false;

                    } 
                    //]]>
                        
                </script>

            </p:dialog>

        </ui:composition>

    </h:body>

</html>
